import { getAdaptiveImgHeight, transform2px, transformConfig } from '@/utils/customModule';
import { Image, View } from '@tarojs/components';
import React, { useEffect, useState } from 'react';
import './index.scss';
import { navigateTo } from '../utils';

const styleConfig = {
  imgItem: [
    'borderRadius',
    { marginRight: 'imgMargin' },
    (styleSettingRender) => {
      const v = transform2px(styleSettingRender.imageSize);

      return {
        width: v,
        flex: `0 0 ${v}`,
      };
    },
  ],
};

const ModuleImgHorizontalScroll = ({ imgUrlList, styleSettingRender }) => {
  const style = transformConfig(styleSettingRender, styleConfig);

  const [imgHeight, setImgHeight] = useState();
  useEffect(() => {
    if (!imgUrlList?.length) {
      return;
    }

    setImgHeight(getAdaptiveImgHeight(imgUrlList, styleSettingRender.imageSize));
  }, [imgUrlList]);

  return (
    <View className="ModuleImgHorizontalScroll">
      <View className="img-container" style={style.module}>
        {imgUrlList?.map(({ imageUrl, url }) => {
          return (
            <View
              className="img-item"
              key={imageUrl}
              style={{ ...style.imgItem, height: `${imgHeight}px` }}
              onClick={() => {
                if(!url || url == '#') return;
                navigateTo(url);
              }}
            >
              <Image className="img" src={imageUrl} mode="aspectFill" />
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default ModuleImgHorizontalScroll;
